<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .box {
                width: 20px;
                height: 20px;
                background-color: yellow;
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <script>
            function Circle(top, left) {
                this.dom = document.createElement("div");
                this.left = left;
                this.top = top;
                this.render = function () {
                    const body = document.querySelector("body");
                    body.appendChild(this.dom);
                    this.dom.className = "box";
                    this.dom.style.position = "absolute";
                    this.dom.style.left = this.left + "px";
                    this.dom.style.top = this.top + "px";
                };
                this.onEnter = function () {
                    this.dom.onmouseenter = () => {
                        this.dom.style.transform = "scale(1.5)";
                    };
                };
                this.onOut = function () {
                    this.dom.onmouseout = () => {
                        this.dom.style.transform = "";
                    };
                };
            }
            function randomNumber(max, min) {
                let a = parseInt(Math.random() * (max - min + 1) + min);
                return a;
            }
            let circle = new Circle(20, 50);
            circle.render();
            circle.onEnter();
            circle.onOut();
            for (let i = 0; i <= 100; ++i) {
                let left = randomNumber(1000, 0);
                let top = randomNumber(500, 0);
                let i = new Circle(left, top);
                i.render();
                i.onEnter();
                i.onOut();
            }
        </script>
    </body>
</html>
